<template>
  <div>
    <el-container>
      <el-main>
        <!--待审核课程列表-->
        <el-card class="box-card" style="width: 100%" v-if="flagWait">
          <div slot="header">
            <span class="text" style="font-weight: bold; font-size: 25px">待审核课程</span>
            <el-button type="text" @click="changeFlagWait" style="padding-left: 20px">查看已审核课程</el-button>
          </div>
          <el-table :data="courselist" border style="width: 100%">
            <el-table-column prop="course.name" label="课程名" width="200" />
            <el-table-column prop="course.childrenRequest" label="幼儿要求" width="200" />
            <el-table-column prop="course.introduce" label="课程介绍" width="200"  show-overflow-tooltip="true"/>
            <el-table-column label="基本费用" width="200" >
              <template slot-scope="scope">
                {{scope.row.course.defaultCost + '元'}}
              </template>
            </el-table-column>
            <el-table-column label="材料费用" width="200" >
              <template slot-scope="scope">
                {{scope.row.course.materialCost + '元'}}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope" v-if="flagWait">
                <el-button type="primary" size="small" @click="examineCourse(scope.row.course.cid)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="page.pageNum"
            :page-size="page.pageSize"
            layout="prev, pager, next, jumper"
            :total="page.totalSize"
            style="float:right;padding: 20px 10px 20px 10px"
            @current-change="handleCurrentChange"
          />
        </el-card>
        <el-card class="box-card" style="width: 100%" v-else>
          <div slot="header">
            <span class="text" style="font-weight: bold; font-size: 25px">已审核课程</span>
            <el-button type="text" @click="changeFlagWait" style="padding-left: 20px">查看待审核课程</el-button>
          </div>
          <el-table :data="auditedCourseList" border style="width: 100%">
            <el-table-column prop="name" label="课程名" width="200" />
            <el-table-column prop="childrenRequest" label="幼儿要求" width="200" />
            <el-table-column prop="introduce" label="课程介绍" width="200" show-overflow-tooltip="true"/>
            <el-table-column label="基本费用" width="200" >
              <template slot-scope="s">
                {{s.row.defaultCost + '元'}}
              </template>
            </el-table-column>
            <el-table-column label="材料费用" width="200" >
              <template slot-scope="s">
                {{s.row.materialCost + '元'}}
              </template>
            </el-table-column>
            <el-table-column prop="costIntroduce" label="费用介绍" width="200" />
          </el-table>
          <el-pagination
            :current-page.sync="page1.pageNum"
            :page-size="page1.pageSize"
            layout="prev, pager, next, jumper"
            :total="page1.totalSize"
            style="float:right;padding: 20px 10px 20px 10px"
            @current-change="handleCurrentChangeA"
          />
        </el-card>
      </el-main>
    </el-container>
    <!--设置课程信息
    <el-dialog
      title="设置课程信息"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" style="width: 500px " label-position="left">
        <el-form-item label="课程状态" prop="state" >
          <el-select v-model = "select">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="默认费用组成" prop="defaultCost" >
          <el-input placeholder="例：0.0元" v-model.trim="ruleForm.defaultCost" />
        </el-form-item>
        <el-form-item label="费用组成说明" prop="costIntroduce" >
          <el-input placeholder="例：教材费X元、材料费X元" v-model.trim="ruleForm.costIntroduce" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateCourseMsg">确 定</el-button>
  </span>
    </el-dialog>-->
  </div>
</template>

<script>
import { getWaitApprovedCourse, getAllCourse } from '../../../api/course'
import { updateCourseState } from '../../../api/course'
// import { updateCourseCost } from '../../../api/course'

export default {
  name: 'Examine',
  data() {
    return {
      flagWait: true,
      cid: '',
      state: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
        totalPage: 0
      },
      page1: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
        totalPage: 0
      },
      courselist: [],
      auditedCourseList: [
        {
          defaultCost: '',
          materialCost: ''
        }
      ],
      dialogVisible: false,
      ruleForm: {
        cid: '',
        defaultCost: '',
        costIntroduce: '',
        state: 1
      },
      options: [{
        value: 1,
        label: '可开班'
      },
      {
        value: 2,
        label: '暂停开班'
      }],
      select: '可开班'
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    // 设置课程费用组成和说明
    // 此功能不属于该页面功能，暂时注释
    // updateCourseMsg() {
    //   this.dialogVisible = false
    //   console.log('select',this.select)
    //   if(this.select == '可开班'){
    //     this.ruleForm.state = 1
    //   }else{
    //     this.ruleForm.state = 2
    //   }
    //   if(this.cid!=''){
    //     updateCourseCost({
    //       cid: this.cid,
    //       defaultCost: this.ruleForm.defaultCost,
    //       costIntroduce: this.ruleForm.costIntroduce
    //     }).then(res => {
    //       this.$message.success('费用组成和说明设置成功！')
    //       updateCourseState({
    //         cid: this.cid,
    //         state: this.ruleForm.state
    //       }).then(res => {
    //         return this.$message.success('课程状态设置成功！')
    //       }).catch(res => {
    //         this.$message.error('课程状态设置失败，请稍后再试！')
    //       })
    //     }).catch(res => {
    //       this.$message.error('费用组成和说明设置失败，请稍后再试！')
    //     })
    //   }else{
    //     this.$message.warning('课程id：null')
    //   }
    //
    // },
    // 切换显示
    changeFlagWait() {
      this.flagWait = !this.flagWait
      if (this.flagWait == true) {
        this.getCourseList()
      } else {
        this.getAuditedCourse()
      }
    },
    // 获取已审核课程列表
    getAuditedCourse() {
      getAllCourse({
        pageNum: this.page1.pageNum,
        pageSize: this.page1.pageSize,
        state: 1
      }).then(res => {
        this.auditedCourseList = res.data.list
        console.log('courselist', this.auditedCourseList)
        this.page1 = res.data.page
      }).catch(res => {
        return this.$message.error('请求已审核课程列表失败！')
      })
    },
    // 翻页
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getCourseList()
    },
    handleCurrentChangeA(val) {
      this.page1.pageNum = val
      this.getAuditedCourse()
    },
    // 审核课程
    examineCourse(cids) {
      this.cid = cids
      console.log('cids', cids)
      this.$confirm('是否确认该课程审核通过?', '审核确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateCourseState({
          cid: this.cid,
          state: 1
        }).then(res => {
          this.$message.success('请求成功！')
          this.$message({
            type: 'success',
            message: '审核通过'
          })
          this.getCourseList()
          // this.dialogVisible = true
        }).catch( err => {
          console.log('cid', this.cid)
          this.$message.error('请求失败！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        })
      })
    },
    // 获取待审核课程列表
    getCourseList() {
      this.courselist = null
      console.log('msg.page', this.page)
      getWaitApprovedCourse({
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then(res => {
        console.log('msg.data', res)
        this.courselist = res.data.list
        this.page = res.data.page
      }).catch(res => {
        return this.$message.error('请求待审核课程列表失败！')
      })
    }
  }
}

</script>

<style scoped>

</style>


<style lang="css">

  .el-tooltip__popper{font-size: 14px; max-width:50% } /*设置显示隐藏部分内容，按50%显示*/

</style>
